<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
		<title>店铺首页2</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/店铺首页.css"/>
	</head>
	<body>
		<div class="zzj_dpsy" id="dpsy">
			<!-- 搜索栏 -->
			<div id="zzj_daohanglan">
				<div id="daohanglan_sousuobox">	
					<img src="img/搜索.png" >
					<input type="text" id="daohanglan_input" placeholder="请输入要搜索的宝贝" value=""/>
				</div>
				<a id="btn_sou" href="#"><button type="button" id="sousuo_btn">搜索</button></a>
			</div>
			<!-- 主图 -->
			<div id="zzj_zhutu">
				<img src="img/首页主图1.jpg" >
			</div>
			<!-- 店铺logo -->
			<div id="zzj_logo">
				<div id="zzj_logo_yuandiv">店</div>
				<div id="zzj_logo_p">
					<p>亿启商城</p>
					<div id="weixinlogo">
						<img src="img/weixin.png" >
						<span>1796745265@qq.com</span>
					</div>
				</div>
			</div>
			<!-- 红包模块--可删除在控制台 -->
			<div id="zzj_hongbao" v-show="isShow">
				<div id="zzj_hongbao_box1">
					<p>亿启商城专卖，有任何问题请联系我们的微信公众号：
					1796745265@qq.com</p>
				</div>
				<div id="zzj_hongbao_box2">
					<div id="box2_qian">￥</div>
					<p>进店领红包，100%中奖</p>
					<div id="box2_btn">点击领取></div>
				</div>
			</div>
			<!-- 商品模块1--面膜标题 -->
			<a name="mianmo"><div id="zzj_mokuai1_biaoti"><span>|</span><p>面膜</p></div></a>
			<!-- 模块一的商品循环 -->
			<div id="zzj_mk1_bigbox">
				<a href="详情页.html"><div id="zzj_mk1_box" v-for="(item,index) in mkarr1" :key="index">
					<img :src="item.img" >
					<p id="p1">{{item.biaoti}}</p>
					<p id="p2">￥{{item.jiage}}</p>
				</div></a>
			</div>
			<!-- 商品模块2--洗面奶标题 -->
			<a name="ximiannai"><div id="zzj_mokuai1_biaoti"><span>|</span><p>洗面奶</p></div></a>
			<!-- 模块二洗面奶的商品循环 -->
			<div id="zzj_mk1_bigbox">
				<a href="详情页.html"><div id="zzj_mk1_box" v-for="(item,index) in mkarr2" :key="index">
					<img :src="item.img" >
					<p id="p1">{{item.biaoti}}</p>
					<p id="p2">￥{{item.jiage}}</p>
				</div></a>
			</div>
			<!-- 底部分类栏目 -->
			<div id="zzj_dibulan">
				<a class="foot" href="商品分类.html"><div id="f1" ><img src="img/sc_goods_logo.png" >商品分类</div></a>
				<a class="foot" href="购物车2.html"><div id="f1" ><img src="img/sc_car_logo.png" >购物车</div></a>
				<a class="foot" href="个人中心.html"><div id="f1" ><img src="img/sc_center_logo.png" >个人中心</div></a>
			</div>
			<!-- 底部盒子撑出固定栏 -->
			<div id="chengdi"></div>
		</div><!-- 大盒子 -->
	</body>
	<script type="text/javascript">
		var dpsy = new Vue({
			el:"#dpsy",
			data:{
				isShow:false,
				mkarr1:[
					{
						img:"img/主图3.jpg",
						biaoti:"大时代面膜",
						jiage:"1200",						
					},
					{
						img:"img/主图1.jpg",
						biaoti:"黑魔法面膜",
						jiage:"999",						
					},
					{
						img:"img/sc_2_1.jpg",
						biaoti:"小天使面膜",
						jiage:"888",						
					},
					{
						img:"img/主图4.jpg",
						biaoti:"新科技面膜",
						jiage:"666",						
					}
				],
				mkarr2:[
					{
						img:"img/洗面奶1.jpg",
						biaoti:"芙丽芳丝 Freeplus",
						jiage:"135",						
					},
					{
						img:"img/洗面奶2.jpg",
						biaoti:"欧莱雅 L'OREAL",
						jiage:"763",						
					},
					{
						img:"img/洗面奶3.jpg",
						biaoti:"珂润 Curél ",
						jiage:"574",						
					},
					{
						img:"img/洗面奶4.jpg",
						biaoti:"科颜氏 Kiehl",
						jiage:"180",						
					}
				]
			}
			
		})
	</script>
	<script type="text/javascript">
		var _input = document.getElementById('daohanglan_input');
		var _btn = document.getElementById('sousuo_btn');
		var btn_sou = document.getElementById('btn_sou');
		_btn.onclick=function(){
			var x = _input.value;
			switch(x){
				case '面膜':
					btn_sou.href="#mianmo";
					break;
				case '洗面奶':
					btn_sou.href="#ximiannai";
					break;
				default:
					btn_sou.href="#";
					alert('该页面不存在此商品，请尝试输入“面膜”或“洗面奶”!');
					break;
			}
		}
	</script>
</html>